<template>
	<view>
		<!-- 计时区 -->
		<view class="header" style="text-align: center;">
			<!-- 计时数字或 -->
			<view>{{timeNum}}</view>
			<!-- 按钮 -->
			<image style="width: 60px; height: 60px;" :src="imgSrc" @click="changeStatus()"></image>
		</view>
		<!-- 计时记录区 -->
		<view class="body">
			<uni-card title="计时记录">
				<uni-list v-for="o in 6">
					<uni-list-item  :title="o" ></uni-list-item>
				</uni-list>			 
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: "../../static/tabbar/start.png",
				// 用于表示当前状态,0代表处于暂定，1代表处于开始
				flag: 0,
				//时间
				timeNum: "00:00:00",
				timer:""
			}
		},
		methods: {
			changeStatus() {
				if (this.flag) {
					this.imgSrc = "../../static/tabbar/start.png"
					this.flag = 0;
					clearInterval(this.timer);
					this.timeNum = "00:00:00"
				} else {
					this.imgSrc = "../../static/tabbar/suspended.png"
					this.flag = 1;
					this.timing()
				}
			},
			timing() {
				var hour, minute, second;
				/时 分 秒/
				hour = minute = second = 0; //初始化
				var millisecond = 0; //毫秒
				this.timer = setInterval(() => {
					millisecond = millisecond + 50;
					if (millisecond >= 1000) {
						millisecond = 0;
						second = second + 1;
					}
					if (second >= 60) {
						second = 0;
						minute = minute + 1;
					}
					if (minute >= 60) {
						minute = 0;
						hour = hour + 1;
					}
					// console.log("-------"+hour+'时'+minute+'分'+second+'秒');
					this.timeNum = hour + ':' + minute + ':' + second;
				}, 50);
			},
		}
	}
</script>

<style>
</style>
